<template>
	<div class="layout-container">  
		<!-- logo和未来蜂商家标题 -->
		<div class="header">
			<div class="brandWrapper">
				<el-image src="/images/Logo/未来蜂商家标志1.png " style="margin-top: 10px;"></el-image>			
			</div>
			<div class="titleWrapper">
				<el-text style="font-size: larger; font-style: italic; letter-spacing: 5px;">未来蜂商家</el-text>
			</div>
			<div style="display: flex;align-items: center; margin-left: 1300px;">
				<el-link :underline="false" @click="logout">
					<return_home style="width: 30px;height: 30px;"></return_home>
					<el-text style="font-weight: 600;color: #000;">安全退出</el-text>
				</el-link>
				
			</div>
		</div>
		  <!-- 商家页面主内容-->
		<div class="top">
				<el-container class="main-container" >
				<el-aside width="250px">
						<el-container style="height: 100%;">
							<!-- 最左边的首页，店铺，商品 -->
						<el-aside width="105px" class="sidebar" >
							<!-- 鼠标移到上面时，会切换图片和字体的样式 -->
							<!-- setActive用做判断，移到店铺和商品时右边会显示不同的内容 -->
							<el-link 
								@mouseover="shopIsActive = true , setActive('shop')"   
								@mouseout="turn_click==='shop'? shopIsActive = true:shopIsActive = false"
								@click="turn('/shop/shop_information'),shopOrProduct=true , resetActive(shopOrProduct),console.dir(shopOrProduct)"  
								:underline="false" style="margin-top: 30%;">  
								<shop v-if="!shopIsActive" style="width: 22px;height: 22px;margin-right: 13px;" />
								<shopActive v-if="shopIsActive" style="width: 22px;height: 22px;margin-right: 13px;" />	
									店铺  
							</el-link>    
							<el-link  
								@mouseover="productIsActive = true , setActive('product')"   
								@mouseout="turn_click==='product' ? productIsActive = true:productIsActive = false" 
								@click="turn('/shop/myproduct',productIsActive ,shopOrProduct=false,console.dir(shopOrProduct)),resetActive(shopOrProduct)"  
								:underline="false" style="margin-top: 30%;">  
								<product v-if="!productIsActive" style="width: 18px;height: 18px;margin-right: 15px;" />
								<productActive v-if="productIsActive" style="width: 18px;height: 18px;margin-right: 15px;" />	
									商品  
							</el-link>
							<!-- 所有权 -->
							<div style="margin-top: 600px; display: flex;">
								<el-text style="color: #a1b1cd; text-align: center;">Copyright @FutureBee Group</el-text> 
							</div>   
						</el-aside>
							<!-- 商品和店铺的更多选项 -->
						<el-main class="right-aside" style="background-color:  #eff1f8; padding: 0%;" v-model="select_item" >
							<div style="width: 100%; height: 100%; padding-top:25px;" class="rounded-aside" >
								<div v-show="activeSection === 'product'" class="product-content">
									<div style="padding-left: 35px;">
									<el-text style="font-size: larger; font-weight: 500;">商品</el-text>
									</div>
									<div style="margin-top: 20px; padding-left: 20px;">
										<el-button style="border: none !important;" @click="turn('/shop/shop_apply')">发布宝贝</el-button>
									</div>
									<div style="margin-top: 20px; padding-left: 20px;" >
										<el-button style="border: none !important;" @click="turn('/shop/myproduct')">我的宝贝</el-button>
									</div>
								</div>
								<div v-show="activeSection === 'shop'" class="shop-content">
									<div style="padding-left: 35px;">
									<el-text style="font-size: larger; font-weight: 500;">店铺</el-text>
									</div>
									<div style="margin-top: 20px; padding-left: 20px;">
									<el-button style="border: none !important;" @click="turn('/shop/shop_information')">店铺信息</el-button>
									</div>
									<div style="margin-top: 20px; padding-left: 20px;">
									<el-button style="border: none !important;" @click="turn('/shop/shop_money')">店铺账单</el-button>
									</div>
								</div>								
							</div>
						</el-main>
						</el-container>
				</el-aside>
				<el-main class="main-content" style="background-color: #ffffff;">
					<router-view></router-view><!--<myproduct/>-->
				</el-main>
				</el-container>
		</div>  
	</div> 
</template>

<script setup>
import shop from '../../../public/images/shop-grc/shop.vue'
import shopActive from '../../../public/images/shop-grc/shopActive.vue'
import product from '../../../public/images/shop-grc/product.vue'
import productActive from '../../../public/images/shop-grc/productActive.vue'
import return_home from '../../../public/images/shop-grc/return.vue'
import { Path } from '@/constant';

import { ref } from 'vue';
import router from '@/router';
const shopIsActive = ref(false)  
const productIsActive = ref(false)
const activeSection = ref(null);
const turn_click=ref(null)
const shopOrProduct = ref(false)
const turn=(path)=>{
	router.push(path)	
}

function logout(){
	document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
	// 将应用域中的数据清空
	router.push("/")
	localStorage.clear();
}
//鼠标移动到商铺，商品时改变右边的内容
function setActive(section){
	activeSection.value=section
}

//当鼠标点击不同按钮时，重置上一个按钮的样式
function resetActive(boo) {  
  if (boo) {  
    productIsActive.value = false;
	turn_click.value = 'shop'  
  } else {  
    shopIsActive.value = false;
	turn_click.value = 'product' 
  }  
}

</script>
<style lang="scss" scoped>
	.layout-container {  
  display: flex;  
  flex-direction: column;
  width: 100%;   
  box-sizing: border-box;
  overflow-x: hidden; 
  height: 100vh;
}  
:deep(.layout-container) {
  overflow: hidden;
}

.header{
	display: flex;
}

.header, .top, .picture, .activity, .new, .footer {  
  width: 100%;  
}  
 
.header{
  background-color: #eff1f8;
  height: 76px;
}
.top{

background-color: white;
	flex: 1; /* 使其占据剩余空间 */
	display: flex;
	flex-direction: column;

}

.el-link:hover{
	color: #000000;
	font-weight: 600;
}
.el-link:click{
	color: #000000;
	font-weight: 600;
}
.brandWrapper{
	width: 108px;
    cursor: pointer;
    height: 76px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

//未来蜂商家标题
.titleWrapper{
	width: 128px;
    cursor: pointer;
    height: 76px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.el-image__inner{
	height: 79%;
	width: 100%;
}

.rounded-aside {  
  border-radius:50px 0 0 0; /* 左上角和右上角设置圆角，右下角和左下角保持直角 */  
  overflow: hidden; /* 确保子元素不会超出圆角范围 */  
  background-color: #ffffff;
}


.new{
background-color: rgb(153, 255, 127);
  height: 150px;
}   ter{
background-color: rgb(236, 255, 127);
  height: 150px;
} 
.main-container {
	flex: 1;
	display: flex;
	height: 100%;
}

.sidebar {
	background-color: #eff1f8;
	height: 100%;
	padding-left: 15px;
	padding-top: 25px;
}

.right-aside {
	background-color: #eff1f8;
	padding: 0;
	flex: 1;
}

.main-content {
	background-color: #ffffff;
	flex: 1;
	overflow-y: auto; /* 使内容溢出时可以滚动 */
}

</style>